<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Excel上传界面</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="layui-v2.5.6\layui\css\layui.css"  media="all">
    <script src="layui-v2.5.6\layui\layui.js" charset="utf-8"></script>
    <link rel="stylesheet" type="text/css" href="bootstrap\bootstrap.min.css"/>
    <script src="bootstrap\jquery.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="bootstrap\popper.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="bootstrap\bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="vue\axios.js"></script>
    <script src="vue\Vue.js"></script>
</head>
<body>
<div id="app" class="container" style="margin-top: 50px">
    <table class="table table-striped text-center table-hover table-bordered text" id="table">
        <thead>
        <tr class="text-info" style="font-size: 12px;">
            <th>序号</th>
            <th>学期</th>
            <th>学科</th>
            <th>知识点</th>
            <th>类型</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody class="text-muted" style="font-size: 12px;" >
        <tr v-for="knowledgepoint in knowledgepoints.list">
            <td>{{knowledgepoint.kpId}}</td>
            <td>{{knowledgepoint.gradeType}}</td>
            <td>{{knowledgepoint.subject}}</td>
            <td>{{knowledgepoint.kdname}}</td>
            <td v-if="knowledgepoint.statu == 1">
                重点
            </td>
            <td v-else>
                非重点
            </td>
            <td>
                <button class="btn btn-primary btn-sm">详情</button>
            </td>
        </tr>
        </tbody>
    </table>
    <div class="col-md-6">

    </div>
    <nav aria-label="Page navigation example" style="text-align:center;" >
        <ul class="pagination" >
            <li class="page-item " >
                <label class="page-link" @click="firstPage(1)">首页</label>
            </li>

            <li class="page-item active" v-for="navigatepageNum in knowledgepoints.navigatepageNums" v-if="navigatepageNum == knowledgepoints.pageNum">
                <label class="page-link" @click="currentPage(navigatepageNum)">{{navigatepageNum}}</label>
            </li>
            <li class="page-item" v-else>
                <label class="page-link" @click="currentPage(navigatepageNum)">{{navigatepageNum}}</label>
            </li>

            <li class="page-item " >
                <label class="page-link" @click="lastPage(knowledgepoints.pages)">末页</label>
            </li>
        </ul>
    </nav>
   <!-- <p class="text-info">当前页：{{movies.pageNum}},总页数：{{movies.pages}}，总共多少条记录：{{movies.total}}</p></a>-->

    <div class="layui-upload">
        <button type="button" class="layui-btn layui-btn-normal" id="test8">选择文件</button>
        <button type="button" class="layui-btn" id="test9">开始上传</button>
    </div>
</div>




</body>
<script>
    layui.use('upload', function(){
        var $ = layui.jquery
            ,upload = layui.upload;

        //选完文件后不自动上传
        upload.render({
            elem: '#test8'
            ,url: 'uploading/files' //改成您自己的上传接口
            ,auto: false
            //,multiple: true
            ,bindAction: '#test9'
            ,accept:'file'
            ,exts:'xlsx'
            ,done: function(res){
                if(res.code == 200){
                    layer.msg(res.message);
                }
                layer.msg(res.message);
            }
        });
    });

    new Vue({
        el: '#app'
        ,data:{
            knowledgepoints:[],
        },
        mounted(){
            axios.get("uploading/selectall")
                .then(res=>{
                    this.knowledgepoints = res.data.data;
                }
            )
        },
        methods:{
            lastPage:function(pn){
                var params = new URLSearchParams();
                params.append("pn",pn)
                axios
                    .post("uploading/selectall",params)
                    .then(res =>{
                        this.knowledgepoints = res.data.data;
                    });
            },

            firstPage:function (pn) {
                var params = new URLSearchParams();
                params.append("pn",pn)
                axios
                    .post("uploading/selectall",params)
                    .then(res =>{
                        this.knowledgepoints = res.data.data;
                    });
            },
            currentPage:function(pn){
                var params = new URLSearchParams();
                params.append("pn",pn)
                axios
                    .post("uploading/selectall",params)
                    .then(res =>{
                        this.knowledgepoints = res.data.data;
                    });
            },
        }
    });
</script>
</html>